<template>
    <panel-head :route="route"/>
    <!-- 表单内容 -->
    <el-table :data="tableData.list" style="width: 100%;">
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="name" label="昵称"/>
        <el-table-column prop="permissions_id" label="所属组别">
            <template #default="scope">
                {{ permissionName(scope.row.permissions_id) }}
            </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号"/>

        <el-table-column prop="active" label="状态">
        <template #default="scope">
            <el-tag :type="scope.row.active?'success':'danger'">{{ scope.row.active?'正常':'失效' }}</el-tag>
            </template>
        </el-table-column>

        <el-table-column  label="创建时间">
        <template #default="scope">
            <div class="flex-box">
                <el-icon><Clock /></el-icon>
            <span style="margin-left: 10px;">{{ scope.row.create_time }}</span>
            </div>
            </template>
        </el-table-column>

       <el-table-column label="操作">
        <template #default="scope">
            <el-button type="primary" @click="open(scope.row)">编辑</el-button>
        </template>
       </el-table-column>
    </el-table>
    <div class="pagination-info">
        <el-pagination
            v-model:current-page="paginationData.pageNum"
            :page-size="paginationData.pageSize"
            :background="false"
            size="small"
            layout="total, prev, pager, next"
            :total="tableData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
    </div>
    <!-- 点击编辑时候的弹窗 -->
    <el-dialog
        v-model="dialogFormVisable"
        :before-close="beforeClose"
        title="添加权限"
        width="500"
        >
        <el-form
            ref="formRef"
            label-width="100px"
            label-position="left"
            :model="form"
            :rules="rules"
            >
        <el-form-item label="手机号" prop="mobile">
            <el-input v-model="form.mobile" disabled />
        </el-form-item>
        <el-form-item label="昵称" prop="name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="菜单权限" prop="permissions_id">
            <el-select 
            v-model="form.permissions_id"
            placeholder="请选择菜单权限"
            style="width: 240px"
            >
            <el-option 
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
            </el-select>
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="confirm(formRef)">确认</el-button>
        </div>
    </template>
    </el-dialog>
</template>

<script setup>
//导入接口
import { authAdmin ,menuSelectList,updateUser} from '../../../api/auth/index';
import {ref, reactive,onMounted } from 'vue';
//引入路由
import { useRoute } from 'vue-router';
import dayjs from 'dayjs';
const route = useRoute()

//定义分页数据
const paginationData =reactive({
    pageNum:1,
    pageSize:10
})
 //列表数据
 const tableData = reactive({
        list:[],
        total:0
    })
//定义菜单权限数据
const options = ref([])

//编辑弹窗控制
const dialogFormVisable = ref(false)
//点击关闭的方法
const beforeClose = ()=>{
    dialogFormVisable.value = false
}
//编辑表单
//定义表单提交时的数据
const formRef = ref()
const form = reactive({
    name:'',
    permissions_id:''
})
//定义校验规则
const rules = reactive({
    name:[{required:true,trigger:'blur',message:'请填写昵称'}],
    permissions_id:[{required:true,trigger:'blur',message:'请选择菜单权限'}]
})
onMounted(()=>{
    getListData()
    menuSelectList().then(({data})=>{
        options.value = data.data
    })
})

//请求列表
const getListData = ()=>{
    authAdmin(paginationData).then(({data})=>{
        // console.log(data,'authadmin');
        const {list,total} = data.data
        //把时间戳格式的数据转化为标准时间
        list.forEach(item => {
            item.create_time = dayjs(item.create_time).format('YYYY-MM-DD')
        });
        tableData.list = list
        tableData.total = total
    })
}
//表单提交
const confirm = async(formEl)=>{
    if (!formEl) return
    await formEl.validate((valid,fields)=>{
        //通过校验后的逻辑
        if(valid){
            //获取数据，传递到接口
            const {name, permissions_id} = form
            updateUser({name, permissions_id}).then(({data})=>{
                if(data.code === 10000){
                    dialogFormVisable.value =false
                    getListData()
                }
            })
        }else{
            console.log('error submit',fields);
        }
    })
    }
//根据权限id匹配权限名称
const permissionName = (id)=>{
    const data = options.value.find(el=>el.id === id)
    return data? data.name : '超级管理员'
}
//分页换页方法
const handleSizeChange = (val)=>{
        paginationData.pageSize  =val
        getListData()
    }
const handleCurrentChange = (val)=>{
        paginationData.pageNum = val
        getListData()
}
//编辑数据时进行数据回填
const open = (rowDate) =>{
    dialogFormVisable.value = true
    Object.assign(form,{mobile:rowDate.mobile,name:rowDate.name,permissions_id:rowDate.permissions_id})

}
</script>

<style lang="less" scoped>
.flex-box{
    display: flex;
    align-items: center;
}

</style>